<template>
  <div>
    <h2>最受好评电影</h2>
    <div class="wrap">
      <ul>
        <li v-for="item in list" :key="item._id">
          <img :src="item.imgUrl" alt="" />
          <span> {{ item.title }}</span>
          <b v-if="item.score">评分:{{ item.score }}</b>
          <b v-else>{{ item.wishNum }}人想看</b>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      list: [],
    };
  },

  created() {
    // 数据请求
    // fetch是h5自带的数据请求方式
    fetch("http://www.pudge.wang:3080/api/rated/list")
      .then((response) => response.json())
      .then(async (res) => {
        console.log(res.status);
        if (res.status == 0) {
          this.list = res.result;
          await this.$nextTick();

          new BScroll(".wrap", {
            scrollX: true,
            scrollY: false,
            click: true,
          });
        }
      });
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
div {
  padding: 12px 15px;
  background-color: #fff;

  margin-bottom: 10px;
  width: 359px;
  height: 203px;
  h2 {
    width: 344px;
    height: 20px;
    font-size: @xs-font;
    margin-bottom: 12px;
    font-weight: normal;
    color: #333;
  }
}
.wrap {
  width: 100%;
  height: 147px;
  overflow: hidden;
}
ul {
  display: inline-flex;
  // width: 344px;
  height: 147px;
  // padding: 0 10px;

  li {
    margin-right: 10px;
    width: 85px;
    height: 142px;

    position: relative;

    img {
      height: 115px;
      width: 100%;
    }
    span {
      display: block;
      font-size: 13px;
      color: #222;
      margin-bottom: 3px;
      text-align: center;
      width: 50px;
      line-height: 18px;
      margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    b {
      display: block;
      width: 100%;
      height: 17px;
      position: absolute;
      left: 0px;
      bottom: 27px;
      color: #faaf00;
      font-size: 11px;
      font-weight: 600;
      background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    }
  }
}
</style>
